<template>
  <!--------------------- 等级框 --------------------
* @auto kyle
* @date 2020-7-28
* @inrto 等级框通用组件，高度固定，背景色和图标根据等级变化
* @props gradeInfo为组件对外属性，传入值为包含等级名称和等级的对象
  -->
  <div :class="gradeClass">
    <img :src="gradeImg" align="absmiddle">
    <span>{{ changeGradeInfo.GradeName }}</span>
  </div>
</template>

<script>
export default {
  name: 'LevelBox',
  props: {
    gradeInfo: {
      type: Object,
      required: true,
      default: function() {
        return {
          GradeName: '',
          GradeLevel: ''
        }
      }
    }
  },
  data() {
    return {
      gradeImg: require('assets/images/grade8.png'),
      gradeClass: 'dis-inb grade-box plr-20 fs-24 grade-8'
    }
  },
  computed: {
    changeGradeInfo() {
      var Obj = this.gradeInfo
      if (parseInt(Obj.GradeLevel) && parseInt(Obj.GradeLevel) >= 1 && parseInt(Obj.GradeLevel) <= 8) {
        this.gradeClass = 'dis-inb grade-box plr-20 fs-24 grade-' + Obj.GradeLevel
        this.gradeImg = require('assets/images/grade' + Obj.GradeLevel + '.png')
      } else {
        this.gradeClass = 'dis-inb grade-box plr-20 fs-24 grade-8'
        this.gradeImg = require('assets/images/grade8.png')
      }
      if (!Obj.GradeName) {
        Obj.GradeName = '一星会员'
      }
      return Obj
    }
  }
}
</script>
<style lang="scss" scoped>
.grade-box {
  height: 46px;
  line-height: 46px;
  border-radius: 23px;
  img {
    width: 46px;
    height: 46px;
    top: -2px;
  }
  span {
    display: inline-block;
    line-height: 46px;
  }
}
</style>

